<template>
  <view class="login_page">
    <view class="header_section">
      <image src="@/static/img/common/logo.png" class="logo_image" mode="widthFix" />
    </view>

    <!-- 登录表单 -->
    <view class="form_container">
      <text class="form_title">登入</text>

      <form @submit="handleLogin">
        <view class="input_wrapper">
          <input class="input_field" placeholder="账户" v-model="formData.username" />
        </view>

        <view class="input_wrapper">
          <input
            class="input_field"
            placeholder="密码"
            password
            v-model="formData.password"
          />
        </view>

        <!-- <view class="google_login_section">
          <button class="google_login_button" open-type="getUserInfo">
            <text>继续使用 Google 登录</text>
          </button>
        </view> -->
        <view class="btn_wrapper">
          <button form-type="submit" type="primary">登录</button>
        </view>
      </form>
      <!-- Google 登录按钮挂载点 -->
      <view id="googleBtn" style="margin-top: 60rpx; text-align: center;min-height: 30px;"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData:{
        username: "",
        password: "",
      }
    };
  },
  mounted() {
     // 动态加载 Google SDK
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);

    script.onload = () => {
      // SDK 加载完毕后再初始化
      this.initGoogleLogin();
    };
  },
  methods: {
    // 传递过去的登录参数有一个属性是 type：0 表示普通登录，1 表示 google 登录
    handleLogin() {
      if (!this.formData.username || !this.formData.password) {
        uni.showToast({ title: "请输入账号和密码", icon: "none" });
        return;
      }
      this.$store
        .dispatch("login", {...this.formData, type: 0})
        .then((res) => {
          const redirectPath = uni.getStorageSync('REDIRECT_PATH')
          // console.log('[登录成功后准备跳回] =>', redirectPath)
          if (redirectPath) {
            uni.removeStorageSync('REDIRECT_PATH')
            uni.navigateTo({ url: redirectPath })
          } else {
            uni.navigateTo({ url: '/pages/dashboard/index' })
          }
        }).catch((err) => {});
      // // 模拟登录逻辑
      // uni.setStorageSync("token", "mock-token");
      // uni.navigateTo({ url: "/pages/dashboard/index" }); // 登录成功跳转首页
    },
    initGoogleLogin() {
      google.accounts.id.initialize({
        client_id: "589313698752-8uhfdjv63p5b284a1fgcmm8t68js5ja7.apps.googleusercontent.com", // 👈 替换为你的
        callback: this.handleCredentialResponse,
      });

      google.accounts.id.renderButton(
        document.getElementById("googleBtn"),
        {
          theme: "outline",
          size: "large",
          width: "100%",
        }
      );
    },

    handleCredentialResponse(response) {
      const idToken = response.credential;
      const payload = {
        credential: idToken,
        type: 1
      }
     this.$store
      .dispatch("login", payload)
      .then((res) => {
        uni.navigateTo({ url: "/pages/dashboard/index" });
      })
      .catch((err) => {});
    }
  },
};
</script>

<style lang="scss" scoped>
.login_page {
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header_section {
    height: 120rpx;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo_image {
      height: 60rpx;
      width: 50%;
      transform: scale(0.7);
    }
  }

  .form_container {
    padding: 120rpx 60rpx;
    margin-top: 180rpx;
    display: flex;
    flex-direction: column;

    .form_title {
      font-size: 36rpx;
      text-align: center;
      margin-bottom: 60rpx;
    }

    .input_wrapper {
      background: #f8f8f8;
      border: 1px solid #ddd;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
      padding: 10rpx 20rpx;

      .input_field {
        height: 80rpx;
        font-size: 30rpx;
      }
    }

    .login_button {
      background-color: #1890ff;
      color: #fff;
      font-size: 32rpx;
      border-radius: 10rpx;
      height: 88rpx;
      line-height: 88rpx;
      margin-top: 20rpx;
    }
    .btn_wrapper {
      margin-top: 60rpx;
    }

    .google_login_section {
      margin-top: 60rpx;
      text-align: center;

      .google_login_button {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
        background-color: #fff;

        .google_icon {
          // 如果有图标的话，这里可以添加相应的样式
          width: 36rpx;
          height: 36rpx;
          margin-right: 16rpx;
        }
      }
    }
  }
}
</style>
